<template>
  <Dialog v-model:open="open">
    <DialogContent class="max-w-md">
      <DialogHeader>相似图片扩展</DialogHeader>
      <div class="mb-2">
        <label class="block text-sm mb-1">扩展风格：</label>
        <div class="flex gap-2">
          <Button v-for="style in styles" :key="style" :variant="style===selectedStyle?'default':'outline'" size="sm" @click="selectStyle(style)">{{ style }}</Button>
        </div>
      </div>
      <div class="mb-2">
        <label class="block text-sm mb-1">生成数量：</label>
        <Input type="number" v-model="count" min="1" max="5" class="w-20" />
      </div>
      <div class="mb-2">
        <Button size="sm" @click="generate">生成相似图片</Button>
      </div>
      <div class="flex flex-wrap gap-2 mb-2">
        <div v-for="(url, idx) in previewUrls" :key="idx" class="flex flex-col items-center">
          <img :src="url" class="w-24 h-24 object-cover rounded border" />
          <Button size="sm" class="mt-1" @click="addToLibrary(url)">添加到素材库</Button>
        </div>
      </div>
      <DialogFooter>
        <Button @click="open=false">关闭</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Dialog, DialogContent, DialogHeader, DialogFooter } from './ui/dialog';
import { Button } from './ui/button';
import { Input } from './ui/input';

const props = defineProps<{ open: boolean; image: any; }>();
const emit = defineEmits(['update:open', 'add']);

const styles = ['风格一', '风格二', '风格三'];
const selectedStyle = ref(styles[0]);
const open = ref(props.open);
const count = ref(3);
const previewUrls = ref<string[]>([]);

watch(() => props.open, v => open.value = v);
watch(open, v => emit('update:open', v));

function selectStyle(style: string) {
  selectedStyle.value = style;
}

function generate() {
  // 实际应调用AI接口，这里用原图加随机参数模拟
  previewUrls.value = Array.from({ length: count.value }, (_, i) => `${props.image?.url}?style=${selectedStyle.value}&v=${i+1}`);
}

function addToLibrary(url: string) {
  emit('add', url);
}
</script> 